<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"
    />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <title>标题</title>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      .module-list-wrap {
        width: 400px;
        overflow-x: scroll;
      }
      .module-list li {
        font-style: normal;
        display: inline-block;
        width: 100px;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <div class="module-list-wrap">
        <icon name="xiangzuojiantou" class="left-icon" @click="leftmove"
          >左箭头</icon
        >
        <ul
          class="module-list"
          :style="{
            width: itemlist.length * 100 + 'px',
            'margin-left': xxx * 100 + 'px',
          }"
        >
          <li v-for="(item, index) in itemlist" :key="index">
            {{ item.name }}
          </li>
        </ul>
        <icon class="right-icon" @click="rightmove">右箭头</icon>
      </div>
    </div>
    <script type="text/javascript">
      var vm = new Vue({
        el: "#app",
        data: {
          itemlist: [
            { name: "北京" },
            { name: "上海" },
            { name: "天津" },
            { name: "重庆" },
            { name: "河北" },
            { name: "山西" },
            { name: "内蒙古" },
            { name: "辽宁" },
            { name: "吉林" },
            { name: "黑龙江" },
            { name: "江苏" },
            { name: "浙江" },
            { name: "安徽" },
            { name: "福建" },
            { name: "江西" },
            { name: "山东" },
            { name: "河南" },
            { name: "湖北" },
            { name: "湖南" },
            { name: "广东" },
            { name: "广西" },
            { name: "海南" },
            { name: "四川" },
            { name: "贵州" },
            { name: "云南" },
            { name: "西藏" },
            { name: "陕西" },
            { name: "甘肃" },
            { name: "青海" },
            { name: "宁夏" },
            { name: "新疆" },
          ],
          xxx: 0,
        },
        methods: {
          leftmove() {
            if (this.xxx < 0) {
              this.xxx += 1;
            }
          },
          rightmove() {
            if (this.xxx > -(this.itemlist.length + this.xxx)) {
              this.xxx -= 1;
            }
          },
        },
      });
    </script>
  </body>
</html>
